<template>
  <div class="tabbarWrap">
    <!-- 五个菜单 -->
    <item txt="首页" mark="nav1" :curr="currmark" @change="getVal">
      <template #normalImg>
        <img src="../assets/images/1.png" alt="" />
      </template>
      <template #activeImg>
        <img src="../assets/images/6.png" alt="" />
      </template>
    </item>
    <item txt="书影音" mark="nav2" :curr="currmark" @change="getVal">
      <template #normalImg>
        <img src="../assets/images/2.png" alt="" />
      </template>
      <template #activeImg>
        <img src="../assets/images/7.png" alt="" />
      </template>
    </item>
    <item txt="广播" mark="nav3" :curr="currmark" @change="getVal">
      <template #normalImg>
        <img src="../assets/images/3.png" alt="" />
      </template>
      <template #activeImg>
        <img src="../assets/images/8.png" alt="" />
      </template>
    </item>
    <item txt="小组" mark="nav4" :curr="currmark" @change="getVal">
      <template #normalImg>
        <img src="../assets/images/4.png" alt="" />
      </template>
      <template #activeImg>
        <img src="../assets/images/9.png" alt="" />
      </template>
    </item>
    <item txt="我的" mark="nav5" :curr="currmark" @change="getVal">
      <template #normalImg>
        <img src="../assets/images/5.png" alt="" />
      </template>
      <template #activeImg>
        <img src="../assets/images/10.png" alt="" />
      </template>
    </item>
  </div>
</template>

<script>
import item from "./Item.vue";
export default {
  components: { item },
  data() {
    return {
      currmark: "nav1",
    };
  },
  methods: {
    getVal(val) {
      this.currmark = val;
    },
  },
};
</script>

<style scope>
.tabbarWrap {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 60px;
  display: flex;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}
.item{
    flex: 1;
}
.item img{
    width: 30px;
}
</style>